<template>
    <div id="particles-js" class="particles-background main">
      <slot></slot>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Background',
    mounted() {
      // 确保 particles.js 已加载
      if (typeof window.particlesJS !== 'undefined') {
        this.initParticles()
      } else {
        // 如果未加载，等待加载完成
        window.addEventListener('load', () => {
          this.initParticles()
        })
      }
    },
    methods: {
      initParticles() {
        if (typeof window.particlesJS === 'undefined') {
          console.error('particlesJS is not loaded')
          return
        }
  
        window.particlesJS('particles-js', {
          particles: {
            number: {
              value: 80,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: '#00ffff'
            },
            shape: {
              type: 'circle'
            },
            opacity: {
              value: 0.5,
              random: false,
              anim: {
                enable: false
              }
            },
            size: {
              value: 3,
              random: true,
              anim: {
                enable: false
              }
            },
            line_linked: {
              enable: true,
              distance: 150,
              color: '#00ffff',
              opacity: 0.4,
              width: 1
            },
            move: {
              enable: true,
              speed: 6,
              direction: 'none',
              random: false,
              straight: false,
              out_mode: 'out',
              bounce: false
            }
          },
          interactivity: {
            detect_on: 'canvas',
            events: {
              onhover: {
                enable: true,
                mode: 'repulse'
              },
              onclick: {
                enable: true,
                mode: 'push'
              },
              resize: true
            }
          },
          retina_detect: true
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .particles-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/background.jpg');
    background-size: cover;
  }
  </style>